<template>
	<div class="share_page layer">
		<van-nav-bar :title="$t('my.languageSettings')" left-arrow @click-left="$router.go(-1)" :border="false" />
		<div class="cont">
			<div class="cell_box">
				<van-radio-group v-model="radio">
					<van-cell :title="item.name" @click="handleItem(item)" v-for="(item,index) in $locale">
						<template #right-icon>
							<van-radio :name="item.locale" />
						</template>
					</van-cell>
				</van-radio-group>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		Locale
	} from 'vant';
	// 引入英文语言包
	import enUS from 'vant/es/locale/lang/en-US';
	import zhHK from 'vant/es/locale/lang/zh-HK';
	import zhCN from 'vant/es/locale/lang/zh-CN';
	export default {
		components: {},
		data() {
			return {
				radio: this.$i18n.locale,
				localeObj: {
					'zh': {
						name: 'zh-CN',
						file: zhCN
					},
					'en': {
						name: 'en-US',
						file: enUS
					},
					'cht': {
						name: 'zh-HK',
						file: zhHK
					},
				}
			}
		},
		computed: {},
		watch: {},
		mounted() {},
		methods: {
			handleItem(item) {
				this.$i18n.locale = item.locale
				localStorage.setItem('lang', item.locale)
				Locale.use(this.localeObj[item.locale].name, this.localeObj[item.locale].file)
				this.radio = item.locale
				this.$router.replace('/')
			}
		}
	}
</script>

<style scoped lang="less">
	.share_page {
		.cont {
			padding-top: 10px;

			.cell_box {
				background-color: #3D3D3D;
				border-radius: 16px;
				overflow: hidden;
				margin-bottom: 20px;

				.van-cell {
					background-color: #3D3D3D;
					padding: 13px 20px;
					align-items: flex-end;

					::v-deep .van-cell__title {
						text-align: left;
						color: #fff;
					}

					::v-deep .van-cell__right-icon {
						color: #fff;
					}

					::v-deep .van-radio__icon--checked .van-icon {
						color: #333;
						background-color: #0DF5E3;
						border-color: transparent;
					}

					::v-deep .van-radio__icon .van-icon {
						border: 0;
					}
				}
			}
		}
	}
</style>